<template>
	<view>
		<!-- 地址 -->
		<navigator url="/pages/address/address?source=1" class="address-section" v-if="logisticsType == 2">
			<view class="order-content">
				<view class="" style="width: 60rpx">
					<uv-icon name="map" size="26" color="#999"></uv-icon>
				</view>
				<view class="cen" v-if="JSON.stringify(addressData) != '{}'">
					<view class="top">
						<text class="name">{{ addressData.name }}</text>
						<text class="mobile">{{ addressData.mobile }}</text>
					</view>
					<text class="address">
						{{ addressData.province }}{{ addressData.city }}{{ addressData.district
						}}{{ addressData.address }} {{ addressData.houseNumber }}
					</text>
				</view>
				<view class="cen" v-else>当前没有默认地址，请选择收货地址</view>
				<view class="" style="width: 60rpx">
					<uv-icon name="arrow-right" size="20" color="#999"></uv-icon>
				</view>
			</view>
		</navigator>
		<view class="menu_box" style="padding: 20rpx 30rpx; background-color: #fff; margin-top: 10rpx">
			<view class="head" style="font-weight: 700; margin-bottom: 30rpx">
				<view class="left"><span>提货方式</span></view>
			</view>
			<uv-radio-group v-model="logisticsType" placement="row" shape="square" @change="changeRadio">
				<uv-radio
					:customStyle="{ marginRight: '60px' }"
					v-for="(item, index) in delivery"
					:key="index"
					:label="item.name"
					:name="item.id"
				></uv-radio>
			</uv-radio-group>
		</view>
		<view v-if="logisticsType == 3" style="background-color: #fff; padding: 0 30rpx; box-sizing: border-box">
			<view
				class="uni-form-item uni-column"
				style="
					display: flex;
					justify-content: space-between;
					height: 90rpx;
					align-items: center;
					font-size: 28rpx;
				"
			>
				<view class="title">自提联系人</view>
				<input
					style="flex: 1; text-align: right"
					class="uni-input"
					v-model="selfaddress.name"
					placeholder="请输入联系人"
				/>
			</view>
			<view
				class="uni-form-item uni-column"
				style="
					display: flex;
					justify-content: space-between;
					height: 90rpx;
					align-items: center;
					font-size: 28rpx;
				"
			>
				<view class="title">预留电话</view>
				<input
					style="flex: 1; text-align: right"
					class="uni-input"
					v-model="selfaddress.mobile"
					placeholder="请输入联系人电话"
				/>
			</view>
			<view
				class="uni-form-item uni-column"
				style="display: flex; justify-content: space-between; height: 90rpx; font-size: 28rpx"
			>
				<view class="title">自提点</view>
				<view class="">
					<view style="font-weight: bold; text-align: right">{{ selfaddress.addressName }}</view>
					<view style="font-size: 24rpx; color: #aeb0b5">{{ selfaddress.address }}</view>
				</view>
				<!-- <input style="flex: 1;text-align: right;" class="uni-input" focus placeholder="请输入联系人电话" /> -->
			</view>
			<view
				class="uni-form-item uni-column"
				style="
					display: flex;
					justify-content: space-between;
					height: 90rpx;
					align-items: center;
					font-size: 28rpx;
				"
			>
				<view class="title">自提时间</view>
				<view class="" style="z-index: 999">
					<view style="font-size: 24rpx; color: #aeb0b5" @click="openTime" v-if="!expectPickTime">
						选择自提时间
					</view>
					<view style="font-size: 24rpx; color: #aeb0b5" @click="show = true" v-else>
						{{ expectPickTime }}
					</view>
					<uv-datetime-picker
						ref="datetimePicker"
						v-model="value"
						mode="datetime"
						@cancel="closeTime"
						@confirm="changeLog"
					></uv-datetime-picker>
				</view>
			</view>
		</view>

		<view class="goods-section">
			<view class="g-header b-b">
				<image class="logo" :src="nowBusinessInfo.jsonViewData.businessLogo"></image>
				<text class="name">{{ nowBusinessInfo.jsonViewData.businessName }}</text>
			</view>
			<!-- 商品列表 -->
			<view class="g-item" v-for="item in orderData">
				<image
					v-if="item.goodsSpecification.length > 0"
					:src="item.goodsSpecification[0].specificationImages"
					mode="aspectFill"
				></image>
				<image v-else :src="item.plugsGoods.previewUrl" mode="aspectFill"></image>
				<view class="right">
					<text class="title clamp" style="margin: 5rpx 0">{{ item.plugsGoods.goodsName }}</text>
					<view
						class=""
						v-if="item.goodsSpecification.length > 0"
						style="display: flex; align-items: center; font-size: 28rpx; color: #333"
					>
						{{
							item.goodsSpecification[0].specificationName
								.replace(/\"/g, '')
								.replace(/\{|}/g, '')
								.replace(/\,/g, '+')
						}}
						<!-- <view v-for="(value,key) in JSON.parse(item.goodsSpecification[0].specificationName)" style="margin-right: 10rpx;"
							:key="key">
							{{JSON.parse(item.goodsSpecification[0].specificationName)[key]}}
						</view> -->
					</view>
					<view class="" v-else style="display: flex; align-items: center; font-size: 28rpx; color: #333">
						默认
					</view>
					<view class="price-box">
						<text class="price" v-if="item.goodsSpecification.length > 0">
							¥ {{ item.goodsSpecification[0].dealPrice }}
						</text>
						<text class="price" v-else>¥{{ item.plugsGoods.goodsPrice }}</text>
						<text class="number">x {{ item.goodsNum }}</text>
					</view>
				</view>
			</view>
			<!-- <view class="g-item">
				<image src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1620020012,789258862&fm=26&gp=0.jpg"></image>
				<view class="right">
					<text class="title clamp">韩版于是洞洞拖鞋 夏季浴室防滑简约居家【新人专享，限选意见】</text>
					<text class="spec">春装款 L</text>
					<view class="price-box">
						<text class="price">￥17.8</text>
						<text class="number">x 1</text>
					</view>
				</view>
			</view> -->
		</view>

		<!-- 优惠明细 -->
		<view class="yt-list">
			<view class="yt-list-cell b-b" @click="toggleMask('show')" v-if="couponList.length > 0">
				<view class="cell-icon">券</view>
				<text class="cell-tit clamp">优惠券</text>
				<text class="cell-tip active" v-if="JSON.stringify(selectCoupon) == '{}'">选择优惠券</text>
				<view class="cell-tip active" v-else>
					<view class="" v-if="selectCoupon.couponType == 0 || selectCoupon.couponType == 1">
						满{{ selectCoupon.plugsCoupons.howMuchFullMoney }}减{{
							selectCoupon.plugsCoupons.couponDenomination
						}}
					</view>
					<view class="" v-if="selectCoupon.couponType == 3">
						满{{ selectCoupon.plugsCoupons.howMuchFullMoney }}打{{
							selectCoupon.plugsCoupons.couponDenomination * 10
						}}折
					</view>
				</view>
				<text class="cell-more wanjia wanjia-gengduo-d"></text>
			</view>

			<view class="yt-list-cell b-b" v-else>
				<view class="cell-icon">券</view>
				<text class="cell-tit clamp">优惠券</text>
				<text class="cell-tip active">没有优惠券</text>
				<text class="cell-more wanjia wanjia-gengduo-d"></text>
			</view>

			<!-- <view class="yt-list-cell b-b">
				<view class="cell-icon hb">
					减
				</view>
				<text class="cell-tit clamp">商家促销</text>
				<text class="cell-tip disabled">暂无可用优惠</text>
			</view> -->
		</view>
		<!-- 金额明细 -->
		<view class="yt-list">
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">商品金额</text>
				<text class="cell-tip">￥{{ priceTotal }}</text>
			</view>
			<view class="yt-list-cell b-b" v-if="JSON.stringify(selectCoupon) != '{}'">
				<text class="cell-tit clamp">优惠金额</text>
				<view class="cell-tip red">
					<view class="" v-if="selectCoupon.couponType == 0 || selectCoupon.couponType == 1">
						-￥{{ selectCoupon.plugsCoupons.couponDenomination }}
					</view>
					<view class="" v-if="selectCoupon.couponType == 3">
						-￥{{ (JSON.parse(priceTotal) - JSON.parse(zongPrice)).toFixed(2) }}
					</view>
				</view>
			</view>
			<!-- <view class="yt-list-cell b-b">
				<text class="cell-tit clamp">运费</text>
				<text class="cell-tip" v-if="distributionFee == 0">免运费</text>
				<text class="cell-tip" v-else>￥{{ distributionFee }}</text>
			</view> -->
			<view class="yt-list-cell desc-cell">
				<text class="cell-tit clamp">备注</text>
				<input
					class="desc"
					type="text"
					v-model="orderRemark"
					placeholder="请填写备注信息"
					placeholder-class="placeholder"
				/>
			</view>
		</view>

		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text>实付款</text>
				<text class="price-tip">￥</text>
				<text v-if="JSON.stringify(selectCoupon) == '{}'" class="price">{{ zongPrice }}</text>
				<text v-else class="price">{{ zongPrice }}</text>
			</view>
			<text class="submit" @click="submit">提交订单</text>
		</view>

		<!-- 优惠券面板 -->
		<view class="mask" :class="maskState === 0 ? 'none' : maskState === 1 ? 'show' : ''" @click="toggleMask">
			<view class="mask-content" @click.stop.prevent="stopPrevent">
				<!-- 优惠券页面，仿mt -->
				<view class="coupon-item" v-for="(item, index) in couponList" :key="index">
					<view class="" v-if="item.couponType != 2">
						<view class="con">
							<view class="left">
								<text class="title">{{ item.couponName }}</text>
								<text class="time" v-if="item.plugsCoupons.goodsType == 1">全部商品可用</text>
								<text class="time" v-if="item.plugsCoupons.goodsType == 2">指定商品可用</text>
							</view>
							<view class="right">
								<text class="price" v-if="item.couponType == 0 || item.couponType == 1">
									￥{{ item.plugsCoupons.couponDenomination }}
								</text>
								<text class="price" v-if="item.couponType == 2">
									{{ item.plugsCoupons.couponDenomination }}分
								</text>
								<text class="price" v-if="item.couponType == 3">
									{{ item.plugsCoupons.couponDenomination * 10 }}折
								</text>
								<text v-if="item.couponType == 0 || item.couponType == 1 || item.couponType == 3">
									满{{ item.plugsCoupons.howMuchFullMoney }}可用
								</text>
								<!-- <text class="price">{{item.plugsCoupons.couponDenomination}}</text>
								<text>满{{item.plugsCoupons.howMuchFullMoney}}可用</text> -->
							</view>

							<view class="circle l"></view>
							<view class="circle r"></view>
						</view>
						<view class="getlin" style="">
							<text class="tips" v-if="item.plugsCoupons.timeType == 1">
								{{ item.plugsCoupons.startTime }}--{{ item.plugsCoupons.endTime }}
							</text>
							<text class="tips" v-if="item.plugsCoupons.timeType == 2">
								有效期至领取内{{ item.plugsCoupons.timeDay }}天内有效
							</text>
							<view
								class="linqu"
								style=""
								v-if="priceTotal > item.plugsCoupons.howMuchFullMoney"
								@click="useCoupon(item)"
							>
								使用
							</view>
							<view class="linqu" style="background-color: #999" v-else>使用</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	searchUserInfoById,
	getShippingFeeEstimate,
	createOrder,
	searchPlugsCouponsByUserId,
	getUserSubmitFormDataList
} from '../../utils/api.js';
export default {
	data() {
		return {
			show: false,
			value: Number(new Date()),
			maskState: 0, //优惠券面板显示状态
			desc: '', //备注
			payType: 1, //1微信 2支付宝
			delivery: [
				{
					name: '快递物流',
					id: 2
				},
				{
					name: '到店自提',
					id: 3
				}
			],
			couponList: [],
			receiverAddressJson: {},
			formDataList: [],
			dataJsonList: [],
			dataMoney: 0,
			addressData: {
				// default: true,
				// addressName: '',
				// address: '',
				// province: '',
				// city: '',
				// district: '',
				// latitude:'' ,
				// name: '',
				// mobile: '',
				// longitude:'' ,
				// areaCode: '',
				// houseNumber: ''
			},

			nowBusinessInfo: {},
			orderData: [],
			addressList: [],
			priceTotal: 0,
			distributionFee: 0,
			logisticsType: 2,
			orderRemark: '',
			orderList: [],
			cartIdList: [],
			selectCoupon: {},
			zongPrice: 0,
			expectPickTime: '',
			selfaddress: {
				default: true,
				addressName: uni.getStorageSync('nowBusinessInfo').jsonViewData.businessName,
				address: uni.getStorageSync('nowBusinessInfo').jsonViewData.businessAddress.address,
				province: uni.getStorageSync('nowBusinessInfo').jsonViewData.businessAddress.province,
				city: uni.getStorageSync('nowBusinessInfo').jsonViewData.businessAddress.city,
				district: uni.getStorageSync('nowBusinessInfo').jsonViewData.businessAddress.district,
				latitude: uni.getStorageSync('nowBusinessInfo').jsonViewData.businessAddress.latitude,
				name: '',
				mobile: '',
				longitude: uni.getStorageSync('nowBusinessInfo').jsonViewData.businessAddress.longitude,
				areaCode: '',
				houseNumber: ''
			}
		};
	},
	onLoad(option) {
		//商品数据
		this.orderData = JSON.parse(decodeURIComponent(option.data));
		console.log(this.orderData, 665);
		this.orderData.forEach((item) => {
			let obj = {
				goodsId: item.goodsId,
				goodsNum: item.goodsNum,
				goodsName: item.plugsGoods.goodsName,
				goodsSpecificationIds: item.goodsSpecificationIds,
				goodsSpecificationNames:
					item.goodsSpecification.length > 0 ? item.goodsSpecification[0].specificationName : ''
			};
			this.orderList.push(obj);
			this.cartIdList.push(item.id);
		});

		this.calcTotal();
		this.getuserInfo();
		console.log(this.addressData, 111111);
	},
	onShow() {
		let that = this;
		this.nowBusinessInfo = uni.getStorageSync('nowBusinessInfo');
		uni.$once('addressData', function (index) {
			if (index != null) {
				let data = {
					userId: uni.getStorageSync('userInfo').id
				};
				searchUserInfoById(data).then((res) => {
					if (res.code == 200) {
						if (
							res.body.receiveAddressJson != '' &&
							res.body.receiveAddressJson != null &&
							res.body.receiveAddressJson != '[]'
						) {
							that.addressList = JSON.parse(res.body.receiveAddressJson);
							that.addressData = that.addressList[index];
							that.getdisprice();
						}
					}
				});
			}
		});

		this.getcouponList();
	},

	methods: {
		formatter(value) {
			var date = new Date(value);
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
			var H = date.getHours() + ':';
			var M2 = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			var S = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			return Y + M + D + H + M2 + S;
		},

		openTime() {
			this.$refs.datetimePicker.open();
		},
		closeTime() {
			this.$refs.datetimePicker.close();
		},
		changeLog(e) {
			this.expectPickTime = this.formatter(e.value);
			this.closeTime();
		},
		getuserInfo() {
			let data = {
				userId: uni.getStorageSync('userInfo').id
			};
			searchUserInfoById(data).then((res) => {
				if (res.code == 200) {
					if (
						res.body.receiveAddressJson != '' &&
						res.body.receiveAddressJson != null &&
						res.body.receiveAddressJson != '[]'
					) {
						this.addressList = JSON.parse(res.body.receiveAddressJson);
						// this.addressData=this.addressList.find(item => item.default)
						this.addressList.forEach((item) => {
							if (item.default) {
								this.addressData = item;
								this.getdisprice();
							}
						});
						console.log(this.addressData, 222222);
					}
				}
			});
		},
		changeRadio(e) {
			if (e == 1) {
				this.getdisprice();
			} else if (e == 3) {
				this.distributionFee = 0;
				if (!this.selectCoupon.couponType) {
					this.zongPrice = Number(this.priceTotal + this.distributionFee).toFixed(2);
				} else if (this.selectCoupon.couponType == 0 || this.selectCoupon.couponType == 1) {
					this.zongPrice = Number(
						this.priceTotal + this.distributionFee - this.selectCoupon.plugsCoupons.couponDenomination
					).toFixed(2);
				} else if (this.selectCoupon.couponType == 3) {
					this.zongPrice = Number(
						(this.priceTotal + this.distributionFee) * this.selectCoupon.plugsCoupons.couponDenomination
					).toFixed(2);
				}
			}
		},
		getdisprice() {
			let postData = {
				latitude: this.addressData.latitude || 0,
				logisticsType: this.logisticsType,
				longitude: this.addressData.longitude || 0,
				payMoney: 0,
				bussinessId: this.nowBusinessInfo.jsonViewData.businessId.toString(),
				orderGoodsDTOS: this.orderList,
				receiverAddress: JSON.stringify(this.addressData),
				shopCartIds: this.cartIdList,
				userCouponId: this.selectCoupon.id || '',
				orderRemark: this.ordermark,
				areaCode: this.addressData.areaCode || 0
			};
			getShippingFeeEstimate(postData).then((res) => {
				if (res.code == 200) {
					this.distributionFee = res.body;
					if (!this.selectCoupon.couponType) {
						this.zongPrice = Number(this.priceTotal + this.distributionFee).toFixed(2);
						console.log(this.selectCoupon.couponType, 966);
					} else if (this.selectCoupon.couponType == 0 || this.selectCoupon.couponType == 1) {
						this.zongPrice = Number(
							this.priceTotal + this.distributionFee - this.selectCoupon.plugsCoupons.couponDenomination
						).toFixed(2);
						console.log(this.zongPrice, 456);
					} else if (this.selectCoupon.couponType == 3) {
						this.zongPrice = Number(
							(this.priceTotal + this.distributionFee) * this.selectCoupon.plugsCoupons.couponDenomination
						).toFixed(2);
					}
				}
			});
		},
		calcTotal() {
			let list = this.orderData;
			let total = 0;
			list.forEach((item) => {
				if (item.goodsSpecification.length > 0) {
					total += item.goodsSpecification[0].dealPrice * item.goodsNum;
				} else {
					total += item.plugsGoods.goodsPrice * item.goodsNum;
				}
			});
			this.priceTotal = Number(total.toFixed(2));
			this.zongPrice = Number(total.toFixed(2));
		},
		//显示优惠券面板
		toggleMask(type) {
			let timer = type === 'show' ? 10 : 300;
			let state = type === 'show' ? 1 : 0;
			this.maskState = 2;
			setTimeout(() => {
				this.maskState = state;
			}, timer);
		},
		useCoupon(item) {
			this.selectCoupon = item;
			this.maskState = 0;
			if (this.selectCoupon.couponType == 0 || this.selectCoupon.couponType == 1) {
				this.zongPrice = Number(
					this.priceTotal + this.distributionFee - this.selectCoupon.plugsCoupons.couponDenomination
				).toFixed(2);
			} else if (this.selectCoupon.couponType == 3) {
				this.zongPrice = Number(
					(this.priceTotal + this.distributionFee) * this.selectCoupon.plugsCoupons.couponDenomination
				).toFixed(2);
			}
		},

		getcouponList() {
			let postdata = {
				businessId: this.nowBusinessInfo.jsonViewData.businessId.toString(),
				status: 0
			};

			searchPlugsCouponsByUserId(postdata).then((res) => {
				if (res.code == 200) {
					this.couponList = res.body.list;
				}
			});
		},

		submit() {
			console.log(JSON.stringify(this.addressData) != '{}');
			console.log(this.dataJsonList);
			let data = {
				page: 1
			};
			getUserSubmitFormDataList(data)
				.then((res) => {
					if (res.code == 200) {
						this.formDataList = res.body.list;
						if (this.formDataList.length > 0) {
							this.dataJsonList = JSON.parse(this.formDataList[0].dataJson).formData;
							this.dataMoney = this.dataJsonList[this.dataJsonList.length - 1].money;
						}
						console.log(this.formDataList);
						console.log(this.dataJsonList);
						console.log(this.dataMoney);
					}
				})
				.then(() => {
					console.log(this.formDataList);
					console.log(this.dataJsonList);
					console.log(this.dataMoney);
					if (this.formDataList.length == 0) {
						uni.showModal({
							title: '提示',
							content: '您还没有签署合约，无法下单',
							success(res) {}
						});
						uni.hideLoading();
						return;
					}
					if (this.logisticsType == 3) {
						if (!this.selfaddress.name) {
							uni.showModal({
								title: '订单提示',
								content: '请输入姓名',
								success(res) {}
							});
							uni.hideLoading();
							return;
						} else if (!this.selfaddress.mobile) {
							uni.showModal({
								title: '订单提示',
								content: '请输入联系电话',
								success(res) {}
							});
							uni.hideLoading();
							return;
						} else if (!this.expectPickTime) {
							uni.showModal({
								title: '订单提示',
								content: '请输入自提时间!',
								showCancel: false
							});
							uni.hideLoading();
							return;
						}
					} else if (this.logisticsType == 2) {
						if (JSON.stringify(this.addressData) == '{}' || !this.addressData) {
							uni.showModal({
								title: '订单提示',
								content: '还没有收货地址，请先选择或添加收货地址！',
								confirmText: '选择地址',
								success(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/address/address?source=1'
										});
									}
								}
							});
							uni.hideLoading();
							return;
						}
					}

					console.log(Number(this.zongPrice), this.dataMoney);
					if (Number(this.zongPrice) < Number(this.dataMoney)) {
						uni.showModal({
							title: '提示',
							content: '当前订单金额小于' + this.dataMoney + '，请重新选择商品',
							success(res) {}
						});
						uni.hideLoading();
						return;
					}
					uni.showLoading({
						title: '订单准备中',
						mask: true
					});
					let postData = {
						latitude: this.addressData.latitude || 0,
						logisticsType: this.logisticsType,
						longitude: this.addressData.longitude || 0,
						payMoney: this.zongPrice,
						businessId: this.nowBusinessInfo.jsonViewData.businessId.toString(),
						orderGoodsDTOS: this.orderList,
						receiverAddress:
							this.logisticsType == 2
								? JSON.stringify(this.addressData)
								: JSON.stringify(this.selfaddress),
						shopCartIds: this.cartIdList,
						userCouponId: JSON.stringify(this.selectCoupon) !== '{}' ? this.selectCoupon.id : 0,
						orderRemark: this.ordermark,
						areaCode: this.addressData.areaCode || 0,
						expectPickTime: this.logisticsType == 3 ? this.expectPickTime : ''
					};
					console.log(postData);

					createOrder(postData).then((res) => {
						uni.hideLoading();
						if (res.code === 200) {
							uni.showToast({
								icon: 'success',
								title: '创建成功'
							});
							setTimeout(() => {
								uni.redirectTo({
									url: `/pages/money/pay?info=${encodeURIComponent(JSON.stringify(res.body))}`
								});
							}, 800);
						} else {
							uni.showModal({
								title: '订单提示',
								content: res.msg,
								showCancel: false
							});
							return;
						}
					});
					console.log(postData);
				});
		},
		stopPrevent() {}
	}
};
</script>

<style lang="scss">
page {
	background: #f8f8f8;
	padding-bottom: 100rpx;
}

.address-section {
	padding: 30rpx 0;
	background: #fff;
	position: relative;

	.order-content {
		display: flex;
		align-items: center;
	}

	.icon-shouhuodizhi {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90rpx;
		color: #888;
		font-size: 44rpx;
	}

	.cen {
		display: flex;
		flex-direction: column;
		flex: 1;
		font-size: 28rpx;
		color: #303133;
	}

	.name {
		font-size: 34rpx;
		margin-right: 24rpx;
	}

	.address {
		margin-top: 16rpx;
		margin-right: 20rpx;
		color: #909399;
	}

	.icon-you {
		font-size: 32rpx;
		color: #909399;
		margin-right: 30rpx;
	}

	.a-bg {
		position: absolute;
		left: 0;
		bottom: 0;
		display: block;
		width: 100%;
		height: 5rpx;
	}
}

.goods-section {
	margin-top: 16rpx;
	background: #fff;
	padding-bottom: 1px;

	.g-header {
		display: flex;
		align-items: center;
		height: 84rpx;
		padding: 0 30rpx;
		position: relative;
	}

	.logo {
		display: block;
		width: 50rpx;
		height: 50rpx;
		border-radius: 100px;
	}

	.name {
		font-size: 30rpx;
		color: #606266;
		margin-left: 24rpx;
	}

	.g-item {
		display: flex;
		margin: 20rpx 30rpx;

		image {
			flex-shrink: 0;
			display: block;
			width: 140rpx;
			height: 140rpx;
			border-radius: 4rpx;
		}

		.right {
			flex: 1;
			padding-left: 24rpx;
			overflow: hidden;
		}

		.title {
			font-size: 30rpx;
			color: #303133;
		}

		.spec {
			font-size: 26rpx;
			color: #909399;
		}

		.price-box {
			display: flex;
			align-items: center;
			// font-size: 32rpx;
			color: #303133;
			padding-top: 10rpx;
			font-size: 26rpx;

			.price {
				margin-bottom: 4rpx;
				color: #f85e52;
			}

			.number {
				font-size: 26rpx;
				color: #606266;
				margin-left: 20rpx;
			}
		}

		.step-box {
			position: relative;
		}
	}
}

.yt-list {
	margin-top: 16rpx;
	background: #fff;
}

.yt-list-cell {
	display: flex;
	align-items: center;
	padding: 10rpx 30rpx 10rpx 40rpx;
	line-height: 70rpx;
	position: relative;

	&.cell-hover {
		background: #fafafa;
	}

	&.b-b:after {
		left: 30rpx;
	}

	.cell-icon {
		height: 32rpx;
		width: 32rpx;
		font-size: 22rpx;
		color: #fff;
		text-align: center;
		line-height: 32rpx;
		background: #f85e52;
		border-radius: 4rpx;
		margin-right: 12rpx;

		&.hb {
			background: #ffaa0e;
		}

		&.lpk {
			background: #3ab54a;
		}
	}

	.cell-more {
		align-self: center;
		font-size: 24rpx;
		color: #909399;
		margin-left: 8rpx;
		margin-right: -10rpx;
	}

	.cell-tit {
		flex: 1;
		font-size: 26rpx;
		color: #909399;
		margin-right: 10rpx;
	}

	.cell-tip {
		font-size: 26rpx;
		color: #303133;

		&.disabled {
			color: #909399;
		}

		&.active {
			color: #ff633d;
		}

		&.red {
			color: #ff633d;
		}
	}

	&.desc-cell {
		.cell-tit {
			max-width: 90rpx;
		}
	}

	.desc {
		flex: 1;
		font-size: 28rpx;
		color: #303133;
	}
}

/* 支付列表 */
.pay-list {
	padding-left: 40rpx;
	margin-top: 16rpx;
	background: #fff;

	.pay-item {
		display: flex;
		align-items: center;
		padding-right: 20rpx;
		line-height: 1;
		height: 110rpx;
		position: relative;
	}

	.icon-weixinzhifu {
		width: 80rpx;
		font-size: 40rpx;
		color: #6bcc03;
	}

	.icon-alipay {
		width: 80rpx;
		font-size: 40rpx;
		color: #06b4fd;
	}

	.icon-xuanzhong2 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 60rpx;
		font-size: 40rpx;
		color: #ff633d;
	}

	.tit {
		font-size: 32rpx;
		color: #303133;
		flex: 1;
	}
}

.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 995;
	display: flex;
	align-items: center;
	width: 100%;
	height: 90rpx;
	justify-content: space-between;
	font-size: 30rpx;
	background-color: #fff;
	z-index: 998;
	color: #606266;
	box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);

	.price-content {
		padding-left: 30rpx;
	}

	.price-tip {
		color: #ff633d;
		margin-left: 8rpx;
	}

	.price {
		font-size: 36rpx;
		color: #ff633d;
	}

	.submit {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 280rpx;
		height: 100%;
		color: #fff;
		font-size: 32rpx;
		background-color: #ff633d;
	}
}

/* 优惠券面板 */
.mask {
	display: flex;
	align-items: flex-end;
	position: fixed;
	left: 0;
	top: var(--window-top);
	bottom: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0);
	z-index: 9995;
	transition: 0.3s;

	.mask-content {
		width: 100%;
		min-height: 30vh;
		max-height: 70vh;
		background: #f3f3f3;
		transform: translateY(100%);
		transition: 0.3s;
		overflow-y: scroll;
	}

	&.none {
		display: none;
	}

	&.show {
		background: rgba(0, 0, 0, 0.4);

		.mask-content {
			transform: translateY(0);
		}
	}
}

/* 优惠券列表 */
.coupon-item {
	display: flex;
	flex-direction: column;
	margin: 20rpx 24rpx;
	background: #fff;

	.con {
		display: flex;
		align-items: center;
		position: relative;
		height: 120rpx;
		padding: 0 30rpx;

		&:after {
			position: absolute;
			left: 0;
			bottom: 0;
			content: '';
			width: 100%;
			height: 0;
			border-bottom: 1px dashed #f3f3f3;
			transform: scaleY(50%);
		}
	}

	.left {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		overflow: hidden;
		height: 100rpx;
	}

	.title {
		font-size: 32rpx;
		color: #303133;
		margin-bottom: 10rpx;
	}

	.time {
		font-size: 24rpx;
		color: #909399;
	}

	.right {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #606266;
		height: 100rpx;
	}

	.price {
		font-size: 44rpx;
		color: #ff633d;

		&:before {
			font-size: 34rpx;
		}
	}

	.getlin {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;

		.tips {
			font-size: 24rpx;
			color: #999;
			line-height: 60rpx;
		}

		.linqu {
			font-size: 26rpx;
			color: #fff;
			background-color: orangered;
			width: 100rpx;
			height: 40rpx;
			border-radius: 20rpx;
			text-align: center;
			line-height: 40rpx;
		}
	}

	.circle {
		position: absolute;
		left: -6rpx;
		bottom: -10rpx;
		z-index: 10;
		width: 20rpx;
		height: 20rpx;
		background: #f3f3f3;
		border-radius: 100px;

		&.r {
			left: auto;
			right: -6rpx;
		}
	}
}
</style>
